<template>
  <div>
    <h2>Hello Webpack Vue</h2>
    <ul :class="appStyle.list">
      <li v-for="(ele, index) in arr" :key="index">{{ ele }}</li>
    </ul>
    <br />
    <!-- <button @click="handleError">点击错误</button> -->
    <ul>
      <li><span class="iconfont">&#xe704;</span></li>
      <li><span class="iconfont">&#xe6a3;</span></li>
      <li><span class="iconfont">&#xe639;</span></li>
      <li><span class="iconfont">&#xe891;</span></li>
      <li><span class="iconfont">&#xe64d;</span></li>
    </ul>

    <br />
    <CountComp />
    <br />
    <ImageView />
  </div>
</template>

<script setup lang="ts">
import CountComp from "@/components/CountComp.vue";
import ImageView from "./views/ImageView.vue";
import appStyle from "@/assets/styles/app.module.css";

const arr = ["javascript", "typescript", "vue", "react", "nodejs"].map((item) =>
  item.toUpperCase()
);

// const handleError = () => {
//   throw new Error("error");
// };
console.log(process.env.NODE_ENV);
console.log(process.env.VUE_APP_API_URL);
console.log(process.env.BASE_URL);
console.log(process.env.CURRENT_ENV);
</script>

<style scoped></style>

